<script setup lang="ts">
import { ref, computed } from 'vue'
import {NCard, NDataTable, NTag } from 'naive-ui'
import svgIcon from '../base-svgIcon/index.vue';
// import { useRouter } from 'vue-router';
// const router = useRouter()

// 参数
const props = withDefaults(defineProps<{
    //标题
    title?: string;
    iconName?:string;
    iconColor?: string;
    fontColor?: string;
    data?: any;
    showMenu?:boolean;
    bgColor?:string;
    borderRadius?:string;
    iconComponent?:string;
    isIcon:1 | 2 | 3
}>(), {
    title:'',
    iconName:'',
    showMenu:false,
    bgColor:'#fff',
    iconColor:'#000',
    fontColor:'#000',
    borderRadius:'10px',
    data:[],
    iconComponent:'',
    isIcon:1
});

const emit = defineEmits<{
    // 事件
    (e: "showMenuClick",val:any): void;
    (e: "iconBtnItem",val:any): void;
}>();




function showMenuClick(params: any) {
   emit('showMenuClick',props.showMenu)
}



function iconBtnItem(val: any) {
    console.log(val);
    
   emit('iconBtnItem',val)
}




</script>
<template>
    <span class="iconBox" @click="showMenuClick">
        <svgIcon :icon-name="iconName" size="subSmall"></svgIcon>
        <span>{{title}}</span>
        <div v-if="showMenu" style="position: absolute;top: 30px;" >
            <div style="display: flex;flex-direction: column;">
                <div class="iconBtn"  v-for="(j,k) in data" :key="k" :style="{backgroundColor:bgColor,borderRadius:borderRadius}" @click="iconBtnItem(j)">
                    <div>
                        <span v-if="isIcon == 1" class="iconfont" :class="j.spanClass" style="font-size: 20px;color: black;" :style="{color:iconColor}"></span>
                        <n-icon v-if="isIcon == 2" class="seting_confirm" :component="iconComponent" :style="{color:iconColor}"/>
                        <svgIcon v-if="isIcon == 3" :icon-name="j.spanClass" size="subSmall"></svgIcon>
                    </div>
                    <div style="display:inline-block; font-size: 10px ;color: black;" :style="{color:fontColor}">{{ j.name }}</div>
                </div>
            </div>
        </div>
    </span>

</template>
<style src="./index.scss" scoped/>